<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>购票成功</title>
<meta name="description" content="A Template by Gozha.net">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Gozha.net">

<!-- Mobile Specific Metas-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="telephone=no" name="format-detection">

<!-- Fonts -->
<!-- Font awesome - icon font -->
<link
	href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
	rel="stylesheet">
<!-- Mono font -->
<link href='http://fonts.useso.com/css?family=PT+Mono' rel='stylesheet'
	type='text/css'>
<!-- Roboto -->
<link href='http://fonts.useso.com/css?family=Roboto:400,700'
	rel='stylesheet' type='text/css'>

<!-- Stylesheets -->
<!-- jQuery UI -->
<link
	href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
	rel="stylesheet">

<!-- Mobile menu -->
<link href="css/gozha-nav.css" rel="stylesheet" />
<!-- Select -->
<link href="css/external/jquery.selectbox.css" rel="stylesheet" />

<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css"
	media="screen" />

<!-- Custom -->
<link href="css/style-before.css?v=1" rel="stylesheet" />
<link href="css/style.css?v=1" rel="stylesheet" />

<!-- Modernizr -->
<script src="js/external/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
<script type="text/javascript" src="js/jquerysession.js"></script>

</head>

<body>
	<div class="wrapper place-wrapper">
		<!-- Banner -->
		<jsp:include page="header.jsp"></jsp:include>

		<!-- Main content -->
		<div style="height: 20px"></div>
		<section class="container">
			<div class="order-container" id="">
				<div class="order">
					<img class="order__images" alt='' src="images/tickets.png">
					<p class="order__title">
						感谢购票<br>
						<span class="order__descript">您已成功购票，祝您观影愉快</span>
					</p>
				</div>
				<div class="ticket-control"
					style="position: absolute; margin-top: 40px; margin-left: 1250px;">
					<a href="javascript:void(0)" onclick="getpdf()"
						class="watchlist list--download">下载</a>
				</div>
				<c:choose>
					<c:when test="${empty ticket.ticketid2}">
						<div id="xiazai" style="background-color: #fff;">
							<div class="ticket">
								<div class="ticket-position">
									<div class="ticket__indecator indecator--pre">
										<div class="indecator-text pre--text">线上影票</div>
									</div>
									<div class="ticket__inner">
										<div class="ticket-secondary">
											<span class="ticket__item">影号: <strong
												class="ticket__number">${ticket.ticketid1}</strong></span> <span
												class="ticket__item ticket__date">开场时间:
												${schedule.playtime}</span> <span class="ticket__item">售票: <span
												class="ticket__cinema">爆米花票务</span></span> <span
												class="ticket__item">影厅: <span class="ticket__hall">${schedule.hallname}</span></span>
											<span class="ticket__item ticket__price">票价: <strong
												class="ticket__cost">￥${price}</strong></span>
										</div>
										<div class="ticket-primery">
											<span class="ticket__item ticket__item--primery ticket__film">片名
											<br><strong class="ticket__movie">${schedule.moviename}</strong></span>
											<span class="ticket__item ticket__item--primery">座位: <span
												class="ticket__place">${ticket.seat1}</span></span>
										</div>
									</div>
									<div class="ticket__indecator indecator--post">
										<div class="indecator-text post--text">线上影票</div>
									</div>
								</div>
							</div>
						</div>
					</c:when>
					<c:otherwise>
						<div id="xiazai" style="background-color: #fff;">
							<div class="ticket">
								<div class="ticket-position">
									<div class="ticket__indecator indecator--pre">
										<div class="indecator-text pre--text">线上影票</div>
									</div>
									<div class="ticket__inner">
										<div class="ticket-secondary">
											<span class="ticket__item">影号: <strong
												class="ticket__number">${ticket.ticketid1}</strong></span> <span
												class="ticket__item ticket__date">开场时间:
												${schedule.playtime}</span> <span class="ticket__item">售票: <span
												class="ticket__cinema">爆米花票务</span></span> <span
												class="ticket__item">影厅: <span class="ticket__hall">${schedule.hallname}</span></span>
											<span class="ticket__item ticket__price">票价: <strong
												class="ticket__cost">￥${price}</strong></span>
										</div>
										<div class="ticket-primery">
											<span class="ticket__item ticket__item--primery ticket__film">片名
											<br><strong class="ticket__movie">${schedule.moviename}</strong></span>
											<span class="ticket__item ticket__item--primery">座位: <span
												class="ticket__place">${ticket.seat1}</span></span>
										</div>
									</div>
									<div class="ticket__indecator indecator--post">
										<div class="indecator-text post--text">线上影票</div>
									</div>
								</div>
							</div>

							<div class="ticket">
								<div class="ticket-position">
									<div class="ticket__indecator indecator--pre">
										<div class="indecator-text pre--text">线上影票</div>
									</div>
									<div class="ticket__inner">
										<div class="ticket-secondary">
											<span class="ticket__item">影号: <strong
												class="ticket__number">${ticket.ticketid2}</strong></span> <span
												class="ticket__item ticket__date">开场时间:
												${schedule.playtime}</span> <span class="ticket__item">售票: <span
												class="ticket__cinema">爆米花票务</span></span> <span
												class="ticket__item">影厅: <span class="ticket__hall">${schedule.hallname}</span></span>
											<span class="ticket__item ticket__price">票价: <strong
												class="ticket__cost">￥${price}</strong></span>
										</div>
										<div class="ticket-primery">
											<span class="ticket__item ticket__item--primery ticket__film">片名
											<br><strong class="ticket__movie">${schedule.moviename}</strong></span>
											<span class="ticket__item ticket__item--primery">座位: <span
												class="ticket__place">${ticket.seat2}</span></span>
										</div>
									</div>
									<div class="ticket__indecator indecator--post">
										<div class="indecator-text post--text">线上影票</div>
									</div>
								</div>
							</div>
						</div>
					</c:otherwise>
				</c:choose>

			</div>
		</section>
		<jsp:include page="footer.jsp"></jsp:include>

		<jsp:include page="LoginAndRegister.jsp"></jsp:include>


		<!-- JavaScript-->
		<!-- jQuery 1.9.1-->
		<script
			src="http://ajax.useso.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
		<script>
			window.jQuery || document.write('<script src="js/external/jquery-1.10.1.min.js"><\/script>')
		</script>
		<!-- Migrate -->
		<script src="js/external/jquery-migrate-1.2.1.min.js"></script>
		<!-- jQuery UI -->
		<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		<!-- Bootstrap 3-->
		<script
			src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

		<!-- jQuery REVOLUTION Slider -->
		<script type="text/javascript"
			src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
		<script type="text/javascript"
			src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
		<!-- Mobile menu -->
		<script src="js/jquery.mobile.menu.js"></script>
		<!-- Select -->
		<script src="js/external/jquery.selectbox-0.2.min.js"></script>
		<!-- Stars rate -->
		<script src="js/external/jquery.raty.js"></script>
		<!-- Form element -->
		<script src="js/external/form-element.js"></script>
		<!-- Form validation -->
		<script src="js/form.js"></script>

		<!-- Custom -->
		<script src="js/custom.js"></script>
		<script src="js/customf.js"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				$('.top-scroll').parent().find('.top-scroll').remove();
			});
		</script>
		<script type="text/javascript">
			$(document).ready(function() {
				init_Home();
			});
		</script>

		<jsp:include page="JudegeLogin.jsp"></jsp:include>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
		<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

		<script type="text/javascript">
			function getpdf() {
	
				var element = $("#xiazai"); // 这个dom元素是要导出pdf的div容器
				var w = element.width(); // 获得该容器的宽
				var h = element.height(); // 获得该容器的高
				var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
				var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
				var canvas = document.createElement("canvas");
				var abs = 0;
				var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
				var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
				if (win_o > win_i) {
					abs = (win_o - win_i) / 2; // 获得滚动条长度的一半
				}
	
				canvas.width = w * 2; // 将画布宽&&高放大两倍
				canvas.height = h * 2;
				var context = canvas.getContext("2d");
				context.scale(2, 2);
				context.translate(-offsetLeft - abs, -offsetTop);
				// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此        
				// translate的时候，要把这个差值去掉
				html2canvas(element).then(function(canvas) {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;
					//一页pdf显示html页面生成的canvas高度;
					var pageHeight = contentWidth / 592.28 * 841.89;
					//未生成pdf的html页面高度
					var leftHeight = contentHeight;
					//页面偏移
					var position = 0;
					//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
					var imgWidth = 595.28;
					var imgHeight = 592.28 / contentWidth * contentHeight;
	
					var pageData = canvas.toDataURL('image/jpeg', 1.0);
	
					var pdf = new jsPDF('', 'pt', 'a4');
	
					//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
					//当内容未超过pdf一页显示的范围，无需分页
					if (leftHeight < pageHeight) {
						pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
					} else { // 分页
						while (leftHeight > 0) {
							pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
							leftHeight -= pageHeight;
							position -= 841.89;
							//避免添加空白页
							if (leftHeight > 0) {
								pdf.addPage();
							}
						}
					}
					pdf.save('我的影票.pdf');
				})
			}
		</script>
</body>
</html>
